<template>
  <view class="content">
    <view class="content-top">
      <image src="@/static/image/payment/paymentSuccessful.png" />
      <text class="title">支付成功</text>
      <text class="explain">系统已经收到您的付款，预计在 60 分钟内处理您的购买请求，处理成功后将以短信通知的方式告知。如因特殊原因购买失败，系统将原路返还您的支付款项</text>
    </view>
    <view class="content-middle">
      <image src="@/static/image/payment/issueTickets.png" />
      <view class="card">
        <view class="card-title">支付信息</view>
        <view class="card-item" style="margin-top: 30rpx;">
          <text class="left">预订信息</text>
          <text
            class="right"
          >{{ query.code_name?query.code_name : query.ticketEntity[0].code_name }}</text>
        </view>
        <view v-if="datetime" class="card-item">
          <text class="left">出行时间</text>
          <text class="right">{{ datetime }}</text>
        </view>
        <view class="card-item-img">
          <text class="left">支付金额</text>
          <view class="right">
            <image src="@/static/image/payment/seal.png" />
            <text>￥{{ query.prices? query.prices: query.number * query.price }}</text>
          </view>
        </view>
      </view>
    </view>
    <view class="content-bottom">
      <button class="hotel">预订酒店</button>
      <button :class="devtools==='ios'?'goHome goHome-ios':'goHome'" @click="toTicket">返回首页</button>
    </view>
  </view>
</template>
<script>
import { formatDate } from '@utils/myApproach'
import { get } from '@utils/storage'
export default {
  onLoad(option) {
    console.log(option)
    this.query = JSON.parse(option.query)
    console.log(this.query)
    this.datetime = this.query.datetime
      ? formatDate(this.query.datetime)
      : null
  },
  data() {
    return {
      query: null,
      datetime: null
    }
  },
  computed: {
    devtools() {
      return get('devtools')
    }
  },
  methods: {
    toTicket() {
      uni.navigateBack({
        delta: 1
        // url: `/pages/home/details/ticket?uid=${this.query.uid}`
      })
    }
  }
}
</script>
<style  lang="scss" scoped >
.content {
  width: 750rpx;
  height: 100vh;
  background-color: #ffffff;
}
/* 上半部分 */
.content-top {
  width: 750rpx;
  display: flex;
  flex-direction: column;
  padding-top: 70rpx;
  image {
    width: 344rpx;
    height: 264rpx;
    margin-left: 210rpx;
  }
  .title {
    font-size: 36rpx;
    font-weight: 800;
    text-align: center;
    margin-top: 30rpx;
    margin-bottom: 40rpx;
  }
  .explain {
    width: 600rpx;
    height: 96rpx;
    margin-left: 82rpx;
    text-align: center;
    text-indent: 2em;
    word-wrap: break-word;
    word-break: normal;
    font-size: 22rpx;
    color: #cccccc;
  }
}
// 中半部分
.content-middle {
  width: 750rpx;
  display: flex;
  flex-direction: column;
  padding-top: 40rpx;
  image {
    width: 690rpx;
    height: 56rpx;
    margin-left: 30rpx;
  }
  .card {
    display: flex;
    flex-direction: column;
    width: 600rpx;
    padding-bottom: 30rpx;
    margin-left: 76rpx;
    box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
    border-radius: 4rpx 4rpx 8rpx 8rpx;
    .card-title {
      font-size: 32rpx;
      font-weight: 800;
      height: 84rpx;
      line-height: 84rpx;
      margin-left: 30rpx;
      border-bottom: 2rpx solid #f1f1f1;
    }
    .card-item {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      font-size: 28rpx;
      margin-top: 30rpx;
      .left {
        margin-left: 30rpx;
      }
      .right {
        margin-right: 30rpx;
      }
    }
    .card-item-img {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      height: 100rpx;
      font-size: 28rpx;
      .left {
        margin-left: 30rpx;
        line-height: 80rpx;
        margin-top: 20rpx;
      }
      .right {
        position: relative;
        right: 30rpx;
        top: 20rpx;
        height: 80rpx;
        text {
          position: relative;
          font-size: 32rpx;
          font-weight: 800;
          line-height: 80rpx;
          z-index: 19;
        }
        image {
          position: absolute;
          width: 90rpx;
          height: 80rpx;
          right: 0;
          z-index: 9;
        }
      }
    }
  }
}
// 下部分
.content-bottom {
  position: absolute;
  bottom: 0;
  width: 750rpx;
}
.hotel {
  margin: 0;
  padding: 0;
  width: 368rpx;
  height: 80rpx;
  font-size: 32rpx;
  text-align: center;
  line-height: 80rpx;
  background-color: #306de9;
  color: #ffffff;
  margin-bottom: 30rpx;
  margin-left: 198rpx;
}
.goHome {
  margin: 0;
  padding: 0;
  width: 368rpx;
  height: 80rpx;
  font-size: 32rpx;
  text-align: center;
  line-height: 80rpx;
  background-color: #ffffff;
  color: #306de9;
  margin-bottom: 40rpx;
  margin-left: 198rpx;
}
.goHome-ios {
  margin-bottom: 106rpx;
}
.goHome::after {
  border: 2rpx solid #306de9;
}
</style>
